﻿@using Microsoft.Owin.Security
<div class="row oauth"> 
    <h3 class="title"><span>快捷登录</span></h3>
    @{
        var loginProviders = Context.GetOwinContext().Authentication.GetExternalAuthenticationTypes();

        string action = Model.Action;
        string returnUrl = Model.ReturnUrl;
        using (Html.BeginForm(action, "Account", new { ReturnUrl = returnUrl }))
        {
            @Html.AntiForgeryToken()
            <div class="col-xs-12 text-center">
                @foreach (AuthenticationDescription p in loginProviders)
                {
                    <button type="submit" class="btn btn-oauth-icon btn-@p.Caption.ToLower()" id="@p.AuthenticationType" name="provider" value="@p.AuthenticationType" title="登录你的 @p.Caption 账号。"><i class="fa fa-@p.Caption.ToLower()"></i></button>
                }
            </div>
        }
    }
</div>
<style>
    .oauth .title {
        color: #F2AE11;
        text-align: center;
    }
        .oauth .title span {
            display: block; /*设置为块级元素会独占一行形成上下居中的效果*/
            font-size: 0.8em;
            color: #212121;
            position: relative; /*定位横线（当横线的父元素）*/
        }
            .oauth .title span:before, .oauth .title span:after {
                content: ''; /*CSS伪类用法*/
                position: absolute; /*定位背景横线的位置*/
                top: 52%;
                background: #ccc; /*宽和高做出来的背景横线*/
                width: 36%;
                height: 1px;
            }
            .oauth .title span:before {
                left: 3%; /*调整背景横线的左右距离*/
            }
            .oauth .title span:after {
                right: 3%;
            }
</style>
<style>
    .btn-platformsharp {
        color: #ffffff;
        background-color: #444444;
        border-color: rgba(0, 0, 0, 0.2);
    }

    .btn-platformsharp.focus {
        color: #ffffff;
        background-color: #2b2b2b;
        border-color: rgba(0, 0, 0, 0.2);
    }

    .btn-platformsharp:hover {
        color: #ffffff;
        background-color: #2b2b2b;
        border-color: rgba(0, 0, 0, 0.2);
    }

    .btn-platformsharp:active {
        color: #ffffff;
        background-color: #2b2b2b;
        border-color: rgba(0, 0, 0, 0.2);
    }

    .btn-platformsharp:active {
        background-image: none;
    }


    .btn-qq {
        color: #fff;
        background-color: #337ab7;
        border-color: #2e6da4;
    }

    .btn-qq.focus {
        color: #fff;
        background-color: #286090;
        border-color: #122b40;
    }

    .btn-qq:hover {
        color: #fff;
        background-color: #286090;
        border-color: #204d74;
    }

    .btn-qq:active {
        color: #fff;
        background-color: #286090;
        border-color: #204d74;
    }

    .btn-qq:active:hover {
        color: #fff;
        background-color: #204d74;
        border-color: #122b40;
    }

    .btn-qq:active {
        background-image: none;
    }

    .btn-qq.disabled:hover,
    .btn-qq[disabled]:hover {
        background-color: #337ab7;
        border-color: #2e6da4;
    }

    .fa-platformsharp:before {
        content: "\f0b2";
    }
</style>
<style>
    .btn-wechat {
        color: #fff;
        background-color: #5cb85c;
        border-color: #4cae4c;
    }

    .btn-wechat:focus,
    .btn-wechat.focus {
        color: #fff;
        background-color: #449d44;
        border-color: #255625;
    }

    .btn-wechat:hover {
        color: #fff;
        background-color: #449d44;
        border-color: #398439;
    }

    .btn-wechat:active,
    .btn-wechat.active {
        color: #fff;
        background-color: #449d44;
        border-color: #398439;
    }

    .btn-wechat:active:hover,
    .btn-wechat.active:hover {
        color: #fff;
        background-color: #398439;
        border-color: #255625;
    }

    .btn-wechat:active,
    .btn-wechat.active {
        background-image: none;
    }

    .btn-wechat.disabled:hover,
    .btn-wechat[disabled]:hover {
        background-color: #5cb85c;
        border-color: #4cae4c;
    }

    .btn-wechat .badge {
        color: #5cb85c;
        background-color: #fff;
    }
</style>
<style>
    .btn-weibo {
        color: #fff;
        background-color: #d9534f;
        border-color: #d43f3a;
    }
    .btn-weibo:focus,
    .btn-weibo.focus {
        color: #fff;
        background-color: #c9302c;
        border-color: #761c19;
    }
    .btn-weibo:hover {
        color: #fff;
        background-color: #c9302c;
        border-color: #ac2925;
    }
    .btn-weibo:active,
    .btn-weibo.active{
        color: #fff;
        background-color: #c9302c;
        border-color: #ac2925;
    }
    .btn-weibo:active:hover,
    .btn-weibo.active:hover {
        color: #fff;
        background-color: #ac2925;
        border-color: #761c19;
    }
    .btn-weibo:active,
    .btn-weibo.active {
        background-image: none;
    }
    .btn-weibo.disabled:hover,
    .btn-weibo[disabled]:hover {
        background-color: #d9534f;
        border-color: #d43f3a;
    }
    .btn-weibo .badge {
        color: #d9534f;
        background-color: #fff;
    }
</style>